/**
 * Stylesheets for Cosa
 * 
 * @author	Stijn Van Minnebruggen
 */



/* main layout styles */
	
	* { margin: 0; padding: 0; }
	img { border: none; }
	table { border-collapse: collapse; border: none; }
	
	body { background-color: #fff; font-family: Arial, sans-serif; font-size: 11px; color: #000; }
	body.login { background: #efefef url(../img/layout/login_bg.jpg) repeat-x top left; }
	
	.fl-l { float: left; }
	.fl-r { float: right; }
	
	h1 { font-size: 14px; margin-bottom: 5px; }
	h1.add { background: url(../img/icons/m/add.gif) no-repeat center left; padding-left: 23px; margin-bottom: 15px; }
	h1.edit { background: url(../img/icons/m/edit.gif) no-repeat center left; padding-left: 23px; margin-bottom: 15px; }
	
	a { color: #39F; text-decoration: none; }
	a:hover { color: #9cf; text-decoration: none; }
	a.toggleNext { font-weight: bold; font-size: 12px; color: #000; background: url(../img/icons/s/arrow_r.gif) no-repeat center left; padding-left: 15px; }
	a.toggleNext:hover { color: #9cf; }
	a.open { background: url(../img/icons/s/arrow_d.gif) no-repeat center left; }


/* login page */
	
	#login { background-color: #fff; width: 300px; margin: 0 auto; padding: 40px 20px 10px; }
	
	#login .loginTop { height: 50px; width: 300px; }
	#login .loginTop a.homelink { margin-top: 25px; color: #000; text-decoration: none; background: url(../img/icons/m/arrow_l.gif) no-repeat center left; padding-left: 20px; }
	#login .loginTop a.homelink:hover { color: #666; }
	#login .loginTop h1 { display: block; float: left; width: 124px; height: 40px; background: url(../img/layout/cosa_logo.gif) no-repeat; }
	#login .loginTop h1 span { display: none; }
	
	#login .loginF { background-color: #fff; margin-top: 15px; }
	#login .loginF li { list-style: none; margin-bottom: 8px; font-size: 12px; }
	#login .loginF label { width: 80px; float: left; padding-top: 4px; }
	#login .loginF .fld { width: 150px; }
	#login .loginF .sbmt { margin-left: 80px; }
	
	#login-failed { color: #f00; margin-top: 10px; }



/* header layout */
	
	#header { width: 100%; }
	
	#top { height: 27px; line-height: 27px; padding: 0 20px; }
	#top a.homelink { color: #000; text-decoration: none; background: url(../img/icons/s/arrow_l.gif) no-repeat center left; padding-left: 16px; }
	#top a.homelink:hover { color: #666; }
	#top a.logoutlink { color: #000; text-decoration: none; background: url(../img/icons/s/eject.gif) no-repeat center right; padding-right: 18px; }
	#top a.logoutlink:hover { color: #666; }
	#top .fl-r li { float: left; list-style: none; border-left: 1px solid #ccc; padding-left: 10px; margin-left: 10px; }
	#top li a { color: #000; }
	#top li a:hover { color: #666; }
	#top li a.selected { font-weight: bold; }
	
	#navigation { height: 75px; background-color: #9cf; padding: 0 20px; }
	#navigation h1 { font-family: Georgia, Times, serif; font-size: 22px; float: left; margin-top: 25px; }
	#navigation h1 a { color: #000; text-decoration: none; }
	#navigation h1 a:hover { color: #fff; text-decoration: none; }
	#navigation ul { float: left; list-style: none; margin: 24px 0 0 30px; }
	#navigation ul li { font-family: Georgia, Times, serif; font-size: 13px; color: #000; float: left; padding: 0 15px 0 0; margin: 0 0 0 15px; border-right: 1px solid #878D89; height: 30px; line-height: 30px; }
	#navigation ul li.last { border: none; }
	#navigation ul li a { color: #000; text-decoration: none; font-weight: bold; }
	#navigation ul li a:hover { color: #fff; text-decoration: none; }
	#navigation ul li a.selected { text-decoration: underline; }
	#navigation .fl-r { margin-top: 28px; }
	#navigation .fl-r select { width: 150px; }
	
	#breadcrumb { background: #000 url(../img/layout/nav_bg.jpg) repeat-x top left; height: 30px; line-height: 30px; color: #fff; padding: 0 20px; }
	#breadcrumb h2 { font-family: Georgia, Times, serif; font-size: 13px; }
	#breadcrumb a { color: #fff; text-decoration: none; font-weight: bold; }



/* messages */
	
	ul.messages { border: 1px solid #fd6; background-color: #fffff0; color: #333; padding: 10px; display: block; list-style: none; margin-bottom: 15px; font-weight: bold; }



/* main layout */
	
	#main { padding: 20px; }
	#main .inner { position: relative; }
	
	#column { width: 166px; position: absolute; }
	#column ul { background: url(../img/layout/gray_dot.gif) repeat-y 145px; padding: 5px 0 100px 0; list-style: none; }
	#column ul a { color: #000; text-decoration: none; display: block; padding: 2px 10px; }
	#column ul a:hover { color: #000; text-decoration: none; font-weight: bold; }
	#column ul a.sel { background: url(../img/layout/arrow_fat.jpg) no-repeat center left; height: 24px; line-height: 24px; font-weight: bold; }
	
	#body { padding-left: 180px; }
	
	.datatable { width: 100%; }
	.datatable thead td { background-color: #666; color: #fff; font-weight: bold; }
	.datatable thead td a { color: #fff; text-decoration: none; }
	.datatable thead td a:hover { color: #99ccff; text-decoration: none; }
	.datatable td { padding: 8px; text-align: left; }
	.datatable td a { color: #000; font-weight: bold; text-decoration: none; }
	.datatable td a:hover { color: #000; font-weight: bold; text-decoration: underline; }
	.datatable .even { background-color: #fff; }
	.datatable .odd { background-color: #efefef; }
	
	ul.sortable { list-style: none; }
	ul.sortable ul { margin-left: 35px; }
	ul.sortable li { width: 100%; }
	ul.sortable li div { background-color: #efefef; padding: 4px; margin-bottom: 4px; }
	ul.sortable li div ol li { float: left; margin-right: 30px; list-style: none; width: auto; }
	ul.sortable li div ol li.icons { margin-right: 10px; }
	
	#main form ul, ul.f { list-style: none; }
	#main form ul li, ul.f li { margin-bottom: 10px; background-color: #efefef; padding: 15px; }
	#main form ul li ul li, ul.f li ul li { margin-bottom: 5px; padding: 0; }
	#main form ul label, ul.f label { display: block; font-size: 12px; margin-bottom: 5px; font-weight: bold; }
	#main form ul li.sbmt, ul.f li.sbmt { background-color: #dfdfdf; }
	#main form ul li input.sbmt, ul.f li input.sbmt { margin-right: 20px; }
	
	.moduleTopNav { margin-bottom: 10px; }



/* install */
	
	.install { min-width: 750px; width: auto !important; width: 750px; }
	.install #navigation h1 { display: block; background: url(../img/layout/cosa_logo_onblue.gif) no-repeat; width: 107px; height: 34px; margin-top: 22px; }
	.install #navigation h1 span { display: none; }
	.install #error { border: 1px solid #f00; color: #f00; font-weight: bold; }
	.install .error { border: 1px solid #f00; }



/* forms and fields */
	
	input.fld { width: 300px; border: 1px solid #ccc; height: 16px; padding: 2px; font-size: 12px; font-family: Arial, sans-serif; }
	input.small { width: 50px; }
	input.cbx { float: left; margin-right: 10px; }
	input.sbmt { font-family: Arial, sans-serif; font-size: 12px; padding: 2px; }
	textarea { border: 1px solid #ccc; padding: 2px; width: 300px; height: 100px; font-size: 12px; font-family: Arial, sans-serif; }
	select { border: 1px solid #ccc; padding: 2px; font-size: 12px; font-family: Arial, sans-serif; }



/* icons and buttons */
	
	a.addLink { background: url(../img/icons/s/add.gif) no-repeat center left; padding-left: 18px; color: #000; text-decoration: none; }
	a.addLink:hover { color: #666; }
	a.editLink { margin-right: 5px; }
	a.delLink { margin-right: 5px; }
	a.bigbtn { padding: 5px; background-color: #efefef; border: 1px solid #dfdfdf; -moz-border-radius: 4px; -webkit-border-radius: 4px; margin: 0 10px 10px 0; }
	a.alert { background: url(../img/icons/m/alert.gif) no-repeat center left; padding: 2px 0 2px 20px; color: #f90 !important; }



/* clearfix */
	
	.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
	.clearfix { display: inline-block; }
	html[xmlns] .clearfix { display: block; }
	* html .clearfix { height: 1%; }


